import type { MenuOption } from 'naive-ui' // Naive UI 菜单选项类型
import { RouterLink } from 'vue-router' // 路由链接组件
import renderIcon from '@/components/Icon/render-icon.ts' // 自定义图标组件渲染函数

/**
 * 创建菜单选项
 *
 * @param label 菜单选项内容，如果开启了路由模式，则会渲染为路由链接，否则为字符串
 * @param key 菜单选项唯一标识，如果开启了路由模式，则会使用路由名称作为唯一标识，否则使用该参数
 * @param enableRoute 是否开启路由模式，默认 false
 * @param routeName 路由名称
 * @param iconName 图标名称
 * @param children 子菜单选项
 */
const createMenuOption = ({
  label,
  key = '',
  enableRoute = false,
  routeName = '',
  iconName = '',
  children,
}: {
  label: string
  key?: string
  enableRoute?: boolean
  routeName?: string
  iconName?: string
  children?: Array<MenuOption> | undefined
}): MenuOption => {
  if (enableRoute) {
    return {
      label: () =>
        h(
          RouterLink,
          {
            to: { name: routeName },
          },
          { default: () => label },
        ),
      key: routeName,
      icon: renderIcon(iconName),
      children,
    }
  }
  return {
    label,
    key,
    icon: renderIcon(iconName),
    children,
  }
}

// 菜单项
const menuOptions: MenuOption[] = [
  createMenuOption({
    label: '网站信息概览',
    key: 'wzxxgl',
    iconName: 'icon--rili',
  }),
  createMenuOption({
    label: '封面信息管理',
    enableRoute: true,
    routeName: 'admin-index-cover',
    iconName: 'icon-yanglazhuye',
  }),
]

export default menuOptions
